<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Online Shop DVDS</title>
        <link href="Style/styles.css" rel="stylesheet" type="text/css" />
        <link href="Style/styleNew.css" rel="stylesheet" type="text/css" />
        <link href="Dashboard/Style/table.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="Script/jquery.js"></script>
        <script type="text/javascript" src="Script/slides.min.jquery.js"></script>
        <script type="text/javascript">
            $(window).ready(function(){
                $(".DetailsAlbumMessageOutputLabel").click(function(){
                    $(".DetailsAlbumMessageOutputLabel").fadeOut(500, "");
                    $(".DetailsAlbumMessage").fadeOut(500, "");
                });
                $(".DetailsAlbumMessage").click(function(){
                    $(".DetailsAlbumMessageOutputLabel").fadeOut(500, "");
                    $(".DetailsAlbumMessage").fadeOut(500, "");
                });
            })
        </script>
        <style type="text/css" media="screen">
            /*
                    Load CSS before JavaScript
            */

            /*
                    Slides container
                    Important:
                    Set the width of your slides container
                    Set to display none, prevents content flash
            */
            #slides{
                width:760px;
                margin-left: -30px;
            }
            #slides .slides_container {
                width:750px;
                height:240px;
                display:none;
            }

            /*
                    Each slide
                    Important:
                    Set the width of your slides
                    If height not specified height will be set by the slide content
                    Set to display block
            */

            #slides .slides_container div {
                width:700px;
                height:170px;
                display:block;
            }

            /*
                    Slides container
                    Important:
                    Set the width of your slides container
                    Set to display none, prevents content flash
            */
            #slides_two .slides_container {
                width:250px;
                display:none;
            }

            /*
                    Each slide
                    Important:
                    Set the width of your slides
                    If height not specified height will be set by the slide content
                    Set to display block
            */

            #slides_two .slides_container div {
                width:250px;
                height:250px;
                display:block;
            }

            /*
                    Slides container
                    Important:
                    Set the width of your slides container
                    Set to display none, prevents content flash
            */
            #slides_three .slides_container {
                width:200px;
                display:none;
            }

            /*
                    Each slide
                    Important:
                    Set the width of your slides
                    If height not specified height will be set by the slide content
                    Set to display block
            */

            #slides_three .slides_container div {
                width:200px;
                height:100px;
                display:block;
            }

            /* 
                    Example only
            */
            .pagination{
                padding-left: 700px;
                border-bottom: 1px solid #D1D0D1;
                float: left;
            }
            .pagination li{
                float: left;
                list-style-type: none;
                padding-right: 5px;
                font-weight: 600;
                padding-bottom: 5px;
            }
            .pagination .current a {
                font-weight: 600;
                color:red;
            }
            .prev{
                display: none;
            }
            .next{
                display: none;
            }
            hr {
                background:#efefef;
            }
        </style>
        <script>
            $(function(){
                $('#slides').slides({
                    generateNextPrev: true,
                    play: 4500
                });
            });
        </script>
    </h:head>
    <h:body>
        <!-- begin #container -->
        <div id="container">
            <!-- begin #header -->
            <div id="header">
                <div class="logo"><a href=""><img src="Images/logo.png" alt="" /></a></div>
                <c:if test="#{masterPageManagerBean.checkLoginLogout()}">
                    <div class="cart"><span style="color: #666">Hello:</span>
                        <a class="MasterPageUser" href="UserPersonalPage.xhtml">#{session.getAttribute("UserName")}</a>
                        <a href="Logout.xhtml" style="color: #333;border-bottom: 2px solid #e47911">Logout</a><br/>Item Cart:&nbsp;
                        <span class="quantityCartspan">#{cartManager.cartSize()} Item</span>&nbsp;|&nbsp;
                        <a id="checkouths" href="DefaultCart.xhtml" style="color: #000; border-bottom: 2px solid #e47911">Checkout</a>
                    </div>
                </c:if>
                <c:if test="#{!masterPageManagerBean.checkLoginLogout()}">
                    <div class="cart">       
                        <div style="right: 0px; float: right" class="ctlogintext"><a href="Login.xhtml" style="color: #000; border-bottom: 2px solid #e47911; right: 0px">Login</a></div>
                        <br/>Item Cart:&nbsp;
                        <span class="quantityCartspan">#{cartManager.cartSize()} Item</span>&nbsp;|&nbsp;
                        <a id="checkouths" href="DefaultCart.xhtml" style="color: #000; border-bottom: 2px solid #e47911">Checkout</a>
                    </div>
                </c:if>
                <div class="slogan">ONLINE STORE</div>
                <div class="clearfloat"></div>
                <div class="headerTop">
                    <div class="menu">
                        <ul>
                            <li id="active"><a href="Default.xhtml">HOME</a></li>
                            <li><a href="">ONLINE STORE</a></li>
                            <li><a href="">NEW PRODUCTS</a></li>
                            <li><a href="">NEWS</a></li>
                            <li><a href="">CONTACT</a></li>
                        </ul>
                    </div>
                    <div class="icons">
                        <ul class="icons">
                            <li><a href=""><img src="Images/twitter.png" alt="" /></a></li>
                            <li><a href=""><img src="Images/delicious.png" alt="" /></a></li>
                            <li><a href=""><img src="Images/facebook.png" alt="" /></a></li>
                            <li><a href=""><img src="Images/feed.png" alt="" /></a></li>
                            <li><a href=""><img src="Images/flickr.png" alt="" /></a></li>
                            <li><a href=""><img src="Images/linkedin.png" alt="" /></a></li>
                            <li><a href=""><img src="Images/myspace.png" alt="" /></a></li>
                            <li><a href=""><img src="Images/stumble.png" alt="" /></a></li>
                        </ul>
                    </div>
                    <div class="clearfloat"></div>
                </div>
                <ui:insert name="deSlide">
                    <div>
                        <div id="slides">
                            <div class="slides_container">
                                <div>
                                    <img width="700px" height="250px"  src="Images/banner/Banner_music_sheet_with_flute.jpg"/>
                                </div>
                                <div>
                                    <img width="700px" src="Images/banner/46647-game-banner.png"/>
                                </div>
                                <div>
                                    <img width="700px" src="Images/banner/game-banner.gif"/>
                                </div>
                                <div>
                                    <img width="700px" src="Images/banner/the-last-of-us-game-banner.jpg"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </ui:insert>
                <div class="clearfloat"></div>
            </div>
            <!-- end #header -->
            <!-- begin #sidebar1 -->
            <div id="sidebar1">
                <h2>CATEGORIES</h2>
                <ul>
                    <ui:repeat value="#{masterPageManagerBean.showMenuCategory()}" var="cate">
                        <li><a href="Default.xhtml?pId=#{cate.cateID}">#{cate.cateName}</a></li>
                    </ui:repeat>
                </ul>
                <div id="bannerdemo2">
                    <ul>
                        <li><img src="Images/banner/200211-MoH-Presentation-Banner.jpg"/></li>
                        <li><img src="Images/banner/BoxZii_banner.jpg"/></li>
                        <li><img src="Images/banner/51OkcuS+7HL._SL500_AA300_.jpg"/></li>
                        <li><img src="Images/banner/images.jpg"/></li>
                    </ul>
                </div>
            </div>
            <!-- end #sidebar1 -->
            <!-- begin #mainContent -->
            <div id="mainContent">
                <ui:insert name="contents">
                </ui:insert>
            </div>
            <div class="clearfloat"></div>

            <!-- end #mainContent -->
            <!-- This clearing element should immediately follow the #mainContent div in order to force the #container div to contain all child floats --><br class="clearfloat" />
            <!-- begin #footer -->
            <div id="footer" style="border-top: 1px solid #d1d0d1; height: 100px; background-color: #fff; padding-left: 10px">
                <p>
                    <a style="color: #333">
                        Contact:04 85829507 
                        <br/><br/>
                        <a style="color: #666">
                            Email:&nbsp;<span style="color: #ff6766">teamnoname@gmail.com,<br/></span>
                        </a>                

                        <br/>
                        <br/>
                        <a style="color: #000;font-size: 11px">
                            CD-DVD Online Store - 1A - Yet Kieu - Hoan Kiem - Ha Noi.
                        </a>   

                    </a> 
                </p>
            </div>
            <!-- end #footer -->
        </div>
        <!-- end #container -->
    </h:body>
</html>

